<template>
  <div>
    <!-- 专业概述 -->
    <popup ref="refPopup" height="80%" width="1100px">
      <schoolDetailMajorDetail ref="refSchoolDetailMajorDetail"></schoolDetailMajorDetail>
    </popup>

    <div class="content-major" v-if="list.length>0">
      <ul class="flex-row line" v-for="(item,index) in list" :key="index">
        <li>
          <block type="probability" :data="{id:item.chongShouBao.id,name:item.chongShouBao.name,probability:item.probability}"></block>
        </li>
        <li class="flex" @click="majorMore(item)" style="width:0">
        <!-- <li class="flex"> -->
          <block type="major" :data="{name:item.name,list:[item.yearOfStudy,item.grade],tuition:item.price}"></block>
        </li>
        <li>
          <block type="plan" :data="{year:item.year,plan:item.planCount,list:item.enrollMajorScoreLines}"></block>
        </li>
        <li class="pl20 pr5 flex-row--c">
          <div
            class="block-btn--add"
            :class="item.choose && 'active'"
            @click="add(item)">
              {{item.choose?'已添加备选库':'添加至备选库'}}
            </div>
        </li>
      </ul>
      <paginate v-if="totalElements>15" :total="totalElements" :current-page="page" @pagechange="pagechange"></paginate>
    </div>
    <no-content v-else :text="text"></no-content>
  </div>
</template>
<script type="text/javascript">
import { api } from '@/utils'
import _ from 'lodash'
// import majorDetail from '../major/major-detail'
import schoolDetailMajorDetail from './school-detail--majorDetail'
const COMPONENTS = {
  schoolDetailMajorDetail
}
export default {
  components: COMPONENTS,
  data () {
    return {
      list: [],
      totalElements: 0,
      schoolName: '',
      page: 1,
      text: '加载中...',
      params: {
        collegeId: '',
        page: 0,
        size: 15,
        type: 'all'
      }
    }
  },
  // props: ['collegeId', 'type'],
  created () {
    // if (this.collegeId) {
    //   this.init(this.collegeId, this.type)
    // }
  },
  methods: {
    majorMore (data) {
      this.$refs.refPopup.init()
      // console.log('data---', data)
      this.$refs.refSchoolDetailMajorDetail.init(data, this.schoolName, this.params.collegeId)
    },
    init (id = '', name = '') {
      this.params.collegeId = id
      this.schoolName = name
      // this.params.type = type
      this.reset()
      this.getData()
    },
    getData () {
      this.$axios.get(api.queryFirstCollegeMajor, { params: this.params }).then(data => {
        if (!_.isEmpty(data)) {
          if (data.content.length > 0) {
            this.list = data.content

            this.totalElements = data.totalElements
          } else {
            this.text = '暂无数据'
          }
        } else {
          this.text = '暂无数据'
          this.reset()
        }
      }).catch(err => {
        console.log(err)
        this.text = '网络走丢了，请稍后重试！'
      })
    },
    // 添加或取消添加备选库
    add (item) {
      item.choose = !item.choose
      if (item.choose) {
        this.$emit('event')
      }
      let params = {
        collegeId: this.params.collegeId,
        studentPlansId: item.id
      }
      this.$axios.post(api.setFirstCollegeMajor, params).then(data => {
        console.log('添加/删除专业')
      }).catch(data => {
        // this.$toast('网络走丢了，请稍后重试！')
        this.getData()
      })
    },
    pagechange (index) {
      this.params.page = index - 1
      this.page = index
      this.getData()
    },
    reset () {
      this.params.page = 0
      this.list = []
      this.totalElements = 0
      this.page = 1
    }
  }
}
</script>
<style lang="scss" scoped>
  /deep/ .block-major{
    padding-right:0px !important;
  }
  .popup-style{
    width:100%; height:100%;
    border-radius:20px;
    background: #FFF;
    padding:20px;
  }
</style>
